<template>
  <view class="await-service container-normal">
    <view class="await-service-time flex flex-item-center justify-between">
      <view class="await-service-time-label">预计上门时间</view>
      <view class="await-service-time-right">{{
        $u.timeFormat(orderData.creatorTime, "yyyy-mm-dd hh:MM:ss")
      }}</view>
    </view>

    <view class="await-service-message">
      <view class="message-up flex flex-item-center">
        <image :src="$photo(projectData.project_log)" mode="" />
        <view class="message-up-right">
          <view class="name" style="color: #333; font-size: 30rpx">
            {{ projectData.title }}
          </view>
          <view class="point">
            <text>{{ projectData.project_time + "分钟&nbsp;|&nbsp;" }}</text>
            <template v-if="projectData.effect">
              <text v-for="(data, index) of projectData.effect" :key="index">
                {{
                  data +
                  (index === projectData.effect.length - 1
                    ? ""
                    : "&nbsp;|&nbsp;")
                }}
              </text>
            </template>
          </view>
          <view class="price">
            ¥<text>{{ projectData.price }}</text>
          </view>
        </view>
      </view>
      <view class="message-down flex flex-item-center justify-between">
        <view class="message-down-title">打车费</view>
        <view class="message-down-right">¥ {{ orderData.distance * 10 }}</view>
      </view>
    </view>

    <view class="await-service-server">
      <view
        class="await-service-server-cell flex flex-item-center justify-between"
      >
        <view class="cell-label">技师名称</view>
        <view class="cell-right flex flex-item-center">
          <u-avatar :src="$photo(technicianData.work_img)" size="20"></u-avatar>
          <view style="margin-left: 10rpx">{{ technicianData.nickname }}</view>
        </view>
      </view>
      <view
        class="await-service-server-cell flex flex-item-center justify-between"
      >
        <view class="cell-label">技师联系方式</view>
        <view
          class="cell-right flex flex-item-center"
          v-if="technicianData.phone"
        >
          <u-icon name="phone-fill" size="20" color="#999"></u-icon>
          <view style="margin-left: 10rpx" @click="callPhone"
            >{{
              technicianData.phone
                ? technicianData.phone.replace(
                    /(\d{3})(\d{4})(\d{4})/,
                    "$1****$3"
                  )
                : ""
            }}（虚拟）</view
          >
        </view>
      </view>
    </view>

    <view class="await-service-status flex flex-item-center justify-between">
      <view class="label">服务状态</view>
      <view class="right">{{ orderStatus }}</view>
    </view>

    <view class="await-service-remark" v-if="orderData.remark">
      <view class="label">备注:</view>
      <view style="margin-top: 20rpx">
        <u--text :lines="2" :text="orderData.remark" color="#999" size="26rpx">
        </u--text>
      </view>
    </view>
    <u-cell-group v-if="isShowRefund">
      <u-cell
        value="申请退款"
        :isLink="true"
        @click="
          $jump('/subPages/user/order/refund', {
            query: { orderId: orderData._id },
          })
        "
      ></u-cell>
    </u-cell-group>
  </view>
</template>

<script>
import { getModelInfo } from "@/api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      orderData: {},
      orderId: "",
      technicianData: {}, // 技师信息
      projectData: {}, // 项目信息
    };
  },
  computed: {
    ...mapState("dictionary", ["userMenuList"]),
    isShowRefund() {
      let code = this.orderData.status_code;
      return code == 4 || code == 6 ? true : false;
    },
    orderStatus() {
      let res = this.userMenuList.find((item) => {
        return item.code === this.orderData.status_code;
      });
      return res ? res.name : "";
    },
  },
  methods: {
    // 获取订单详情
    async getOrderDetail(id) {
      const { data } = await getModelInfo("66002f4f5efd5153ff566ec3", id);
      this.orderData = data;
      this.getTechnicianInfo(data.baseInfo_id); // 获取技师信息
      this.getProjectInfo(data.current_project_Info); // 获取项目信息
    },
    // 获取技师信息
    async getTechnicianInfo(id) {
      const { data } = await getModelInfo("65c08a445efd5153ff55d908", id);
      this.technicianData = data;
    },
    // 获取项目信息
    async getProjectInfo(id) {
      const { data } = await getModelInfo("65b1d17c0921260197c48a76", id);
      this.projectData = data;
    },
    // 拨打电话
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: "18390667909",
        success: function () {
          console.log("拨打成功");
        },
        fail: function () {
          console.log("拨打失败");
        },
      });
    },
  },
  async onShow() {
    await this.getOrderDetail(this.orderId); // 获取订单详情
  },
  onLoad(options) {
    this.orderId = options.orderId;
  },
};
</script>

<style lang="scss" scoped>
.await-service {
  background-color: #fff;
  &-time {
    padding: 20rpx 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 10rpx;

    &-label {
      font-size: 26rpx;
      color: #333;
    }

    &-right {
      font-size: 26rpx;
      color: #ff0000;
    }
  }

  &-message {
    padding: 20rpx 0;
    border-bottom: 1px solid #eee;

    .message-up {
      > image {
        width: 144rpx;
        height: 120rpx;
      }

      &-right {
        padding-left: 20rpx;
        width: 100%;

        > view {
          margin-bottom: 8rpx;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .name {
          font-size: 30rpx;
          color: #333333;
          font-weight: bold;
        }
        .point {
          font-size: 26rpx;
          color: #999999;
        }

        .price {
          font-size: 22rpx;
          color: #e20808;

          > text {
            font-size: 30rpx;
            margin-left: 10rpx;
          }
        }
      }
    }

    .message-down {
      margin-top: 20rpx;

      &-title {
        font-size: 26rpx;
        color: #333;
      }

      &-right {
        font-size: 26rpx;
        color: #e20808;
      }
    }
  }

  &-server {
    &-cell {
      padding: 20rpx 0;
      border-bottom: 1px solid #eee;
      color: #333333;

      .cell-label {
        font-size: 26rpx;
      }

      .cell-right {
        font-size: 28px;
      }
    }
  }

  &-status {
    padding: 20rpx 0;
    border-bottom: 1px solid #eee;
    color: #333333;

    .label {
      font-size: 26rpx;
    }

    .right {
      font-size: 26rpx;
      color: #e20808;
    }
  }

  &-remark {
    padding: 20rpx 0;
    color: #333333;

    .label {
      font-size: 26rpx;
    }

    .right {
      font-size: 26rpx;
      color: #e20808;
    }
  }
}
</style>
